<template>
  <el-dialog
    title="配置监控页面"
    :visible.sync="dialogVisible"
    width="30%"
    @close="handleClose">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="监控页面" prop="name">
        <el-select filterable clearable v-model="form.viewId" placeholder="请选择" style="width: 100%">
          <el-option v-for="item in viewList" :key="item.id" :value="item.id"
                     :label="item.name"/>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSave">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
  import {listView, saveViewLink} from "@/api/iot/view";

  export default {
    props: {
      bizType: {
        type: String
      },
      bizId: {
        type: [String, Number]
      },
      viewId: {
        type: [String, Number]
      }
    },
    data() {
      return {
        dialogVisible: true,
        viewList: [],
        form: {
          viewId: this.viewId,
          bizType: this.bizType,
          bizId: this.bizId,
        },
        rules: {
          viewId: [
            {required: true, message: '请选择监控页面', trigger: 'blur'}
          ],
        }
      }
    },
    beforeMount() {
      console.log('====', this.viewId, this.form.viewId)
      this.getViewList();
    },
    methods: {
      getViewList() {
        listView().then(res => {
          this.viewList = res.rows;
        })
      },
      handleSave() {
        this.$refs.form.validate(valid => {
          if (valid) {
            saveViewLink(this.form).then(res => {
              this.$message.success('操作成功 ');
              this.$emit('success');
            })
          }
        });


      },
      handleClose() {
        this.$emit('close');
      }
    }
  }
</script>
